<template>
	<div class="mask-wrap">
		<div class="mask-content">
			<div class="content">
				<!-- 参加助力-->
				<div v-if=" assistanceStatus === '2'">
					<p class="title">拾恋App，助力领取课程</p>
					<div class="input-wrap">
						<input v-model="phoneNum" class="input" type="tel" placeholder="输入您的手机号" maxlength="11" />
					</div>
					<div class="input-wrap">
						<input  v-model="verifyCode"  class="input" type="tel" placeholder="输入短信验证码" maxlength="4" />
						<span class="assist-text" @click="getVerifyCode">{{verifyCodestatusText}}</span>
					</div>
				</div>
				
				<!-- 查询我的助力 -->
				<div v-if="assistanceStatus === '3'">
						<p class="title">拾恋App，助力领取课程</p>
						<div class="input-wrap">
							<input v-model="phoneNum" type="tel" class="input" placeholder="输入您的手机号" maxlength="11" />
						</div>
				</div>

				<!-- 助力完成 -->
				<div v-if="assistanceStatus === '4'">
					<img src="../assets/assistance-success.png" class="complete-img">
					<p class="complete-text">已完成助力！</p>
				</div>

				<!-- 查询我的助力结果 -->
				<div v-if="assistanceStatus === '5'">
						<p class="title">已有{{myAssistData.count}}人帮你助力</p>
				</div>

				<div class="btn" :class="btnCurStyle" @click="handleSumbit">{{btnText}}</div>
			</div>
			<span class="iconfont icon-x" @click="handleClose"></span>
			<div id="captchaBox"></div>
		</div>
	</div>
</template>
<script>
	import code from '../data/code.json';
	import { geetTestVerifyCode } from '../../../../js/gt';
	export default {
		name: 'y-assistance-mask',
		props: {
			assistanceStatus: String,   // 1帮助助力, 2参加活动, 3查看我的助力情况, 4助力成功
		},
		data() {
			return {
				phoneNum: '',
				verifyCode: '',
				verifyCodestatusText: '获取验证码',
				countDown: 60,
				btnText: '',
				myAssistData: {},
				timing: null,
			}
		},

		computed: {
			btnCurStyle() {
				if (this.assistanceStatus === '1' || this.assistanceStatus === '2') {
					return this.phoneNum.length === 11  && this.verifyCode.length === 4 ? 'onBtn' : '';
				} else if (this.assistanceStatus === '3') {
					return this.phoneNum.length === 11 ? 'onBtn' : '';
				} else if (this.assistanceStatus === '4' || this.assistanceStatus === '5') {
					return 'onBtn';
				}
			}
		},
		methods: {
			handleClose() {
				this.$emit('handleClose');
			},
			async getVerifyCode() {
				const regexPhone = /^1\d{10}$/;
				if (this.countDown === 60 ) {
					if (!regexPhone.test(this.phoneNum)) {
						return this.$toast('手机格式不正确');
					} else {
						let params = {
							serviceCode: this.assistanceStatus === '1' ? 5 : 1,
							verifyKey: this.phoneNum,
							verifyType: '1',
						}
						geetTestVerifyCode(params);
						this.handleCountDown();
					}
				} 
			},
			handleCountDown() {
				this.timing = setInterval(() => {
					if (this.countDown === 0) {
						this.countDown = 60; 
						return clearInterval(this.timing);
					}
					this.countDown = this.countDown - 1;
					this.verifyCodestatusText = this.countDown === 0 ? `获取验证码` : `${this.countDown}s`;
				}, 1000);
			},

			async handleSumbit() {
				const regexPhone = /^1\d{10}$/;
				// // 点击 帮助助力
				// if (this.assistanceStatus === '1') {		
				// 	if (this.phoneNum.length !== 11 || this.verifyCode.length !== 4) {
				// 		return null;
				// 	}
				// 	if (!regexPhone.test(this.phoneNum)) {
				// 		return this.$toast('手机格式不正确');
				// 	}
				// 	this.requestAssistance();
				// }

				// 2点击我也要参加领课程
				if (this.assistanceStatus === '2') {		
					if (this.phoneNum.length !== 11 || this.verifyCode.length !== 4) {
						return null;
					}
					if (!regexPhone.test(this.phoneNum)) {
						return this.$toast('手机格式不正确');
					}
					this.requestJoinAct();
				}

				// 3查看我的助力情况
				if (this.assistanceStatus === '3') { 		
					if (this.phoneNum.length !== 11) {
						return null;
					}
					if (!regexPhone.test(this.phoneNum)) {
						return this.$toast('手机格式不正确');
					}
					this.requestCheckMy();
				}

				// 助力成功,点击我也要参加领课程
				if (this.assistanceStatus === '4') { 
					this.verifyCode = ''; 		// 弹出参加弹框  重置验证码 , 倒计时
					this.countDown = 60;
					this.verifyCodestatusText = '获取验证码';
					clearInterval(this.timing);
					this.assistanceStatus = '2';
				}

				// 查看我的助力情况 结果页  已完成助力  去app内查看教程
				if (this.assistanceStatus === '5') {
					if (this.btnText === '继续分享') {
						this.$emit('shareAssist', {userId: this.myAssistData.userId});
					} else {
						this.$emit('handleOpenAppAssist', {userId: this.myAssistData.userId});
					}   	
				}
			},

			async requestAssistance() {
				let params = {
					activityCode: code.activityCode,
					assistancePhone: this.phoneNum,
					veriCode: this.verifyCode,
					shareUserId: this.$route.params.userid,
					verifyServiceCode: 5,
				}
				let res = await this.$http.post(`/lovelorn/v1.3/pb/activity-assistances/action/assistance`, params);
				if (res.data.code === '200') {
					this.assistanceStatus = '4';
					this.phoneNum = this.phoneNum; // 将手机号传入 助力成功弹窗
					this.btnText = '我也要领课程';
				} else {
					this.$toast(res.data.msg);
				}
			},

			async requestJoinAct() {
				let joinParams = {
					activityCode: code.activityCode,
					assistancePhone: this.phoneNum,
					veriCode: this.verifyCode
				}
				let res = await this.$http.post(`/lovelorn/v1.3/pb/activity-assistances/action/insertForeign`, joinParams);
				if (res.data.code === '200') { 	// 参加成功弹出分享
					let shareParams = {
						userId: res.data.data.userId,
					}
					// 弹出遮罩 手动分享
					this.$emit('shareAssist', shareParams);
				} else if (res.data.code === '1000') {
					this.requestCheckMy();
				} else {
					this.$toast(res.data.msg);
				}
			},

			async requestCheckMy() {
				let checkMyParams = {
					activityCode: code.activityCode,
					userPhone: this.phoneNum
				}
				let res = await this.$http.get(`/lovelorn/v1.3/pb/activity-assistances/action/selectByUserPhone`, {params: checkMyParams });
				if (res.data.code === '200') {
					this.myAssistData = res.data.data;
					this.assistanceStatus = '5';
					if (this.myAssistData.assistanceFlag === 1) {
						this.btnText = '助力完成去听完整课程';
					} else {
						this.btnText = '继续分享';
					}
				} else if (res.data.code === '1000') { 	// 未发起活动 跳转参加活动弹框 保留手机号
					this.assistanceStatus = '2';
					this.phoneNum = this.phoneNum;
				} else {
					this.$toast(res.data.msg);
				}
			}
		},
		mounted() {
			if (this.assistanceStatus === '2' || this.assistanceStatus === '3') {
				this.btnText = '点击查看';
			} else if (this.assistanceStatus === '4') {
				this.btnText = '我也要领课程';
			}
			// else if (this.assistanceStatus === '1') {
			// 	this.btnText = '点击助力';
			// }
		}
	}
</script>
<style scoped>
	.mask-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}

	.mask-content {
		text-align: center;
		& .content {
			background: #fff;
			border-radius: 0.16rem;
			width: 6.06rem;
			padding-top: 0.7rem;
			padding-bottom: 0.6rem;
		}

		& .icon-x {
			font-size: 0.68rem;
			color: #fff;
			margin-top: 0.5rem;
			display: inline-block;
			line-height: 1;
		}

		& .title {
			font-size: 0.4rem;
			color: #000;
			margin-bottom: 0.6rem;
			text-align: center;
			line-height: 1;
		}

		& .input-wrap {
			width: 4.74rem;
			height: 0.76rem;
			margin: 0 auto;
			border-radius: 0.38rem;
			background: #f6f6f6;
			padding: 0 0.4rem;
			position: relative;

			& + .input-wrap {
				margin-top: 0.3rem;
			}

			& .input {
				font-size: 0.28rem;
				color: #000;
				line-height: 0.76rem;
				display: block;
				width: 100%;
			}

			& .assist-text {
				position: absolute;
				line-height: 0.76rem;
				top: 0;
				right: 0;
				padding-right: 0.3rem;
				font-size: 0.28rem;
				color: #fb9759;
			}
		}

		& .btn {
			margin: 0.55rem auto 0;
			width: 4.74rem;
			height: 0.74rem;
			color: #999;
			background: #dcdcdc;
			border-radius: 0.37rem;
			font-size: 0.3rem;
			text-align: center;
			line-height: 0.74rem;
			&.onBtn {
				color: #563417;
				background: linear-gradient(#feb759, #fa9559)
			}
		}

		& .complete-img {
			width: 1.56rem;
			height: 1.56rem;
			margin: 0 auto;
			display: block;
		}

		& .complete-text {
			font-size: 0.34rem;
			color: #000;
			margin-top: 0.26rem;
			text-align: center;
			line-height: 1;
		}
	}

	#captchaBox {
		/* display: none */
		/* opacity: ; */
	}
</style>